<template>
	<div class="padding20">
		<el-row style="margin-bottom: 7px">
			<el-button
				type="primary"
				size="medium"
				icon="el-icon-plus"
				v-if="$tools.hasPermission('cms:cmsChannel:save')"
				@click="handleEdit()"
			>
				添加
			</el-button>
			<el-button
				v-if="$tools.hasPermission('cms:cmsChannel:deleteBatch')"
				size="medium"
				type="danger"
				icon="el-icon-delete"
				@click="handleDeleteBatch()"
			>
				删除
			</el-button>
			<div style="float: right; padding-right: 17px">
				<i class="el-icon-download" style="margin-right: 10px; cursor: pointer" @click="handleExport"></i>
				<i class="el-icon-refresh" style="margin-right: 10px; cursor: pointer" @click="refresh"></i>

				<el-popover placement="bottom" width="180" trigger="click" title="列展示" popper-class="columnShows">
					<el-checkbox-group v-model="tableShowList">
						<el-checkbox v-for="item in tableList" :label="item.propName" :key="item.propName" :value="item.propName">
							{{ item.propDesc }}
						</el-checkbox>
					</el-checkbox-group>
					<i slot="reference" class="el-icon-s-operation" style="cursor: pointer"></i>
				</el-popover>
			</div>
		</el-row>
		<el-table
			ref="multipleTable"
			:data="tableData"
			style="width: 100%; margin-bottom: 20px"
			row-key="id"
			border
			:tree-props="{ children: 'children', hasChildren: 'haveChildren' }"
		>
			<el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>

			<el-table-column
				v-if="$tools.isShow('title', tableShowList)"
				prop="title"
				label="标题"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('keywords', tableShowList)"
				prop="keywords"
				label="关键字"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('name', tableShowList)"
        min-width="180px;"
				prop="name"
				label="名称"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column v-if="$tools.isShow('code', tableShowList)" prop="code" label="标识" :show-overflow-tooltip="true" min-width="120px">
				<template #default="{row}">
					{{ row.code }}
					<fortress-copy :copyData="row.code"></fortress-copy>
				</template>
			</el-table-column>
			<el-table-column
				v-if="$tools.isShow('showflag', tableShowList)"
				prop="showflag"
				label="是否显示"
				:show-overflow-tooltip="true"
				:formatter="showflagFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('category', tableShowList)"
				prop="category"
				label="属性"
				:show-overflow-tooltip="true"
				:formatter="categoryFmt"
			></el-table-column>
			<el-table-column v-if="$tools.isShow('image', tableShowList)" prop="image" label="图片" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<el-image
						v-if="scope.row.image"
						:src="scope.row.image"
						style="width: 60px; height: 60px"
						:preview-src-list="[scope.row.image]"
					/>
				</template>
			</el-table-column>
			<el-table-column
				v-if="$tools.isShow('listtp', tableShowList)"
				prop="listtp"
				label="列表模板"
				:show-overflow-tooltip="true"
				:formatter="listtpFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('covertp', tableShowList)"
				prop="covertp"
				label="封面模板"
				:show-overflow-tooltip="true"
				:formatter="covertpFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('articletp', tableShowList)"
				prop="articletp"
				label="文章模板"
				:show-overflow-tooltip="true"
				:formatter="articletpFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('model', tableShowList)"
				prop="model"
				label="模型"
				:show-overflow-tooltip="true"
				:formatter="modelFmt"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('sort', tableShowList)"
				prop="sort"
				label="排序"
				:show-overflow-tooltip="true"
			></el-table-column>
			<el-table-column
				v-if="$tools.isShow('auditflag', tableShowList)"
				prop="auditflag"
				label="是否审核"
				:show-overflow-tooltip="true"
				:formatter="auditflagFmt"
			></el-table-column>
			<el-table-column label="操作" fixed="right" min-width="180">
				<template slot-scope="scope">
					<el-button v-if="$tools.hasPermission('cms:cmsChannel:info')" size="mini" plain @click="handleInfo(scope.row.id)">
						详情
					</el-button>
					<el-button v-if="$tools.hasPermission('cms:cmsChannel:edit')" size="mini" plain @click="handleEdit(scope.row.id)">
						编辑
					</el-button>
					<el-button
						v-if="$tools.hasPermission('cms:cmsChannel:delete')"
						size="mini"
						plain
						type="danger"
						@click="handleDelete(scope.row)"
					>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 新增、编辑 -->
		<form-edit v-if="formEditVisible" ref="formEdit" :allParents="tableData" @refreshData="queryList"></form-edit>
		<!-- 详情 -->
		<form-info v-if="formInfoVisible" ref="formInfo"></form-info>
	</div>
</template>
<script>
import { cmschannelAuthTree, cmschannelDel, cmschannelDelBatch, cmschannelDynamicExport } from "@/api/cms/cmschannel.js"
import { viewTableList } from "@/api/public.api.js"
import FormEdit from "./cmschannel-edit"
import FormInfo from "./cmschannel-info"
import { enumList, urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			tableData: [],
			formEditVisible: false,
			formInfoVisible: false,
			queryForm: {
				title: "",
				keywords: "",
				name: "",
				code: "",
				parentId: "",
				showflag: "",
				category: "",
				model: "",
				auditflag: "",
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			tableList: [],
			tableShowList: [],
			ChannelCategory_cmsList: [],
			YesNoList: [],
			listtpList: [],
			covertpList: [],
			articletpList: [],
			modelList: [],
		}
	},
	components: {
		"form-edit": FormEdit,
		"form-info": FormInfo,
	},
	created() {
		this.queryEnumList()
		this.queryUrlList()
		this.initTableList()
		this.queryList()
	},
	methods: {
		queryEnumList() {
			this.ChannelCategory_cmsList = []
			enumList("ChannelCategory", "cms").then(resp => {
				if (resp.code == 0) {
					this.ChannelCategory_cmsList = resp.data
				}
			})
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
		},
		queryUrlList() {
			this.listtpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.listtpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.covertpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.covertpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.articletpList = []
			urlList("/cms/cmsTemplate/filter").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.articletpList.push({ code: item.fileName, name: item.fileName })
						})
					}
				}
			})
			this.modelList = []
			urlList("/cms/cmsModel/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.modelList.push({ code: item.id, name: item.title })
						})
					}
				}
			})
		},
		refresh() {
			this.tableData = []
			this.queryList({ current: 1 })
		},
		//查询表格数据
		queryList() {
			cmschannelAuthTree(this.queryForm).then(resp => {
				if (resp.code == 0) {
					this.tableData = resp.data
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},
		//打开编辑窗口
		handleEdit(id) {
			this.formEditVisible = true
			this.$nextTick(() => {
				this.$refs.formEdit.init(id)
			})
		},
		//打开详情窗口
		handleInfo(id) {
			this.formInfoVisible = true
			this.$nextTick(() => {
				this.$refs.formInfo.init(id)
			})
		},
		//删除
		handleDelete(row) {
			this.$confirm("确认删除该记录及子数据, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					cmschannelDel(row.id).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: "success",
								message: "操作成功!",
							})
							this.queryList()
						} else {
							this.$msg({
								message: resp.msg,
								type: "error",
							})
						}
					})
				})
				.catch(() => {})
		},
		//批量删除
		handleDeleteBatch() {
			let checkedRow = this.$refs.multipleTable.selection
			if (checkedRow.length > 0) {
				let ids = []
				checkedRow.forEach(item => {
					ids.push(item.id)
				})
				this.$confirm("确认删除该记录及子数据, 是否继续?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						cmschannelDelBatch(ids).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.queryList()
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					})
					.catch(() => {})
			} else {
				this.$msg({
					message: "请选择数据进行删除",
					type: "error",
				})
			}
		},
		//重置查询框
		resetQueryForm() {
			this.queryForm = {
				title: "",
				keywords: "",
				name: "",
				code: "",
				parentId: "",
				showflag: "",
				category: "",
				model: "",
				auditflag: "",
			}
		},
		//切换查询条件收缩框
		handleCollapseState() {
			this.collapse.flag = !this.collapse.flag
			if (this.collapse.flag) {
				this.collapse.icon = "el-icon-arrow-up el-icon--right"
				this.collapse.label = "收起"
			} else {
				this.collapse.icon = "el-icon-arrow-down el-icon--right"
				this.collapse.label = "展开"
			}
		},
		//视图表格列表初始化
		initTableList() {
			viewTableList("cms_channel").then(resp => {
				if (resp.code == 0) {
					this.tableList = resp.data
					this.tableList.forEach(item => {
						this.tableShowList.push(item.propName)
					})
				}
			})
		},
		showflagFmt(row) {
			let name = "隐藏"
			if (row.showflag) {
				name = "显示"
			}
			return name
		},
		//属性格式化返回
		categoryFmt(row) {
			let name = ""
			if (this.ChannelCategory_cmsList) {
				this.ChannelCategory_cmsList.forEach(item => {
					if (item.code == row.category) {
						name = item.name
					}
				})
			}
			return name
		},
		//列表模板格式化返回
		listtpFmt(row) {
			let name = ""
			if (this.listtpList) {
				this.listtpList.forEach(item => {
					if (item.code == row.listtp) {
						name = item.name
					}
				})
			}
			return name
		},
		//封面模板格式化返回
		covertpFmt(row) {
			let name = ""
			if (this.covertpList) {
				this.covertpList.forEach(item => {
					if (item.code == row.covertp) {
						name = item.name
					}
				})
			}
			return name
		},
		//文章模板格式化返回
		articletpFmt(row) {
			let name = ""
			if (this.articletpList) {
				this.articletpList.forEach(item => {
					if (item.code == row.articletp) {
						name = item.name
					}
				})
			}
			return name
		},
		//模型格式化返回
		modelFmt(row) {
			let name = ""
			if (this.modelList) {
				this.modelList.forEach(item => {
					if (item.code == row.model) {
						name = item.name
					}
				})
			}
			return name
		},
		auditflagFmt(row) {
			let name = "无需审核"
			if (row.auditflag) {
				name = "需要审核"
			}
			return name
		},
		//可见字段excel导出
		handleExport() {
			if (!this.tableShowList || this.tableShowList.length < 1) {
				this.$msg({
					message: "请选择要导出的列",
					type: "error",
				})
				return
			}
			let colNum = 1
			let headerList = []
			this.tableShowList.forEach(item => {
				let nameData = this.tableList.find(item2 => {
					return item2.propName == item
				})
				let name = ""
				if (nameData && nameData.propDesc) {
					name = nameData.propDesc
				} else {
					name = "未定义字段" + colNum++
				}
				headerList.push({ name: name, code: item })
			})
			cmschannelDynamicExport({ headerList: headerList, dto: this.queryForm })
		},
	},
}
</script>
<style scoped></style>
